import {
	getRouters
} from '@/api/menu.js'
import {
	defaultRouterMap
} from '@/router/index'
import Layout from '@/pages/main'
const state = {
	routes: [], //静态 路由 + 后台返回当前用户的的路由  合并
	addRoutes: [] //后台返回当前用户的的路由
}

const getters = {
	routes: state => state.routes,
	roles: state => state.roles,

}
const mutations = { //同步方法
	SET_ROUTES(state, value) {
		state.addRoutes = value
		// state.routes = defaultRouterMap.concat(value) //拼接动态路由
	}
}
const actions = {
	// 生成路由
	GenerateRoutes({
		commit
	}) {
		return new Promise(resolve => {
			// 向后端请求路由数据
			getRouters().then(res => {
				console.log('getRouter')
				const accessedRoutes = filterAsyncRouter(res.data)
				//* 通配符 匹配所有路径
				accessedRoutes.push({ path: '*', redirect: '/404', hidden: true })
				commit('SET_ROUTES', accessedRoutes)
				console.log('accessedRoutes',accessedRoutes)
				resolve(accessedRoutes)
			})
		})
	}
}

// 遍历后台传来的路由字符串，转换为组件对象
function filterAsyncRouter(asyncRouterMap) {
	return asyncRouterMap.filter(route => {
		if (route.component) { // 如果当前路由有 component 属性
			// Layout 组件特殊处理
			if (route.component === 'Layout') { // 如果组件是字符串 'Layout'
				route.component = Layout; // 将其替换为实际的 Layout 组件（假设 Layout 已经被导入）
			} else {
				route.component = loadView(route.component); // 否则，使用 loadView 函数动态加载组件
			}
		}
		// 如果当前路由有 children 属性并且不是空数组，则递归调用 filterAsyncRouter 处理子路由
		if (route.children != null && route.children && route.children.length) {
			route.children = filterAsyncRouter(route.children);
		}

		return true; // 保留所有路由，即不改变原始数组中的元素数量
	});
}

export const loadView = (view) => { // 路由懒加载
	return () => import(`@/pages/${view}`)
}


export default {
	namespaced: true,
	state,
	getters,
	mutations,
	actions
};
